import 'package:flustars/flustars.dart';
import 'package:flutter/material.dart';
import 'package:flutter_lang/flutter_lang.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:route_manager/wx_navigator.dart';
import 'package:wallet_home/model/wallet_list_model.dart';
import 'package:wallet_home/page/main_page/main_page_wallet.dart';
import 'package:wallet_home/page/theme/colors.dart';
import 'package:wallet_home/tools/theme_utils.dart';
import 'package:wallet_home/widget/coins_manager.dart';

import '../image_r.dart';
import '../module_config.dart';

///抽屉布局
class MainPageDrawerWidget extends StatefulWidget {
  @override
  _MainPageDrawerWidgetState createState() => _MainPageDrawerWidgetState();
}

class _MainPageDrawerWidgetState extends State<MainPageDrawerWidget> {
  String walletName;
  String amount;

  @override
  void initState() {
    super.initState();
    walletName = SpUtil.getString("walletNameKey");
    amount = CoinManager().getTotalAssetsCNY().toString();
  }

  @override
  Widget build(BuildContext context) {
    List<CoinsBean> list = CoinManager().getCoinList(false);
    return Container(
      color: ThemeUtils.getThemeColor(
          context: context,
          brightnessColor: Colors.white,
          darkColor: Colours.dark_bg_color),
      width: MediaQuery.of(context).size.width * 0.8,
      height: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: double.infinity,
            height: 105,
            color: ThemeUtils.getThemeColor(
                context: context,
                brightnessColor: Colours.app_main,
                darkColor: Colors.grey[800]),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.only(top: 50, left: 15),
                  child: Text(
                    "${WXLang.$t("home_my_currency",package: ModuleConfig.moduleName)}",
                    style: TextStyle(color: Colors.grey[300], fontSize: 16),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 5, left: 15, right: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      InkWell(
                        child: Text(
                          "${NumUtil.getNumByValueStr(amount).toStringAsFixed(2)} CNY",
                          style:
                              TextStyle(color: Colors.white, fontSize: 14),
                        ),
                        onTap: () {
                          Navigator.of(context).pop();
                        },
                      ),
//                      Spacer(),
//                      InkWell(
//                        child: Text(
//                          "+ ${WXLang.$t("home_bind_new_wallet",package: ModuleConfig.moduleName)}",
//                          style:
//                              TextStyle(color: Colors.grey[200], fontSize: 12),
//                        ),
//                        onTap: () {
//                          Navigator.of(context).pop();
//                          walletPageKey.currentState.jumpToIndex(1);
//                        },
//                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
          Container(
              height: 40,
              width: double.infinity,
              color: ThemeUtils.getThemeColor(
                  context: context,
                  brightnessColor: Colors.grey[200],
                  darkColor: Colors.grey[600]),
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 15),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      walletName,
                      style: TextStyle(
                          color: ThemeUtils.getThemeColor(
                              context: context,
                              brightnessColor: Colors.grey[800],
                              darkColor: Colors.white),
                          fontSize: 12),
                    ),
                    Spacer(),
                    Text(
                      "${NumUtil.getNumByValueStr(amount).toStringAsFixed(2)} CNY",
                      style: TextStyle(
                          color: ThemeUtils.getThemeColor(
                              context: context,
                              brightnessColor: Colors.grey[800],
                              darkColor: Colors.white),
                          fontSize: 12),
                    ),
                    GestureDetector(
                      child: Image.asset(ImageR.imagesAddCoinGold,
                          height: 30,
                          width: 30,
                          color: ThemeUtils.getThemeColor(
                              context: context,
                              brightnessColor: Colors.grey[500],
                              darkColor: Colors.white),
                          fit: BoxFit.fill,
                          package: ModuleConfig.moduleName),
                      onTap: () {
                        Navigator.of(context).pop();
                        WXNavigator.pushNamed(routeName: '/wallet_search');
                      },
                    )
                  ],
                ),
              )),
          Expanded(
              child: Container(
                  child: MediaQuery.removePadding(
                      context: context,
                      removeTop: true,
                      child: ListView.separated(
                        // controller: _scrollController,
                        itemCount: list.length ?? 0,
                        itemBuilder: (context, index) {
                          return AnimationConfiguration.staggeredList(
                              position: index,
                              duration: Duration(milliseconds: 400),
                              child: SlideAnimation(
                                  verticalOffset: 300.0,
                                  child: FadeInAnimation(
                                    duration: Duration(milliseconds: 300),
                                    child: _buildDrawerListItem(list[index]),
                                  )));
                        },
                        separatorBuilder: (context, index) => Divider(
                          height: 0.5,
//                                    color: Colors.grey[200],
                        ),
                      ))))
        ],
      ),
    );
  }

  _buildDrawerListItem(CoinsBean bean) {
    return InkWell(
      child: Container(
        height: 60,
        color: ThemeUtils.getThemeColor(
            context: context,
            brightnessColor: Colors.white,
            darkColor: Colours.dark_bg_color),
        width: double.infinity,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.only(left: 15),
              child: Image.asset(bean.img,
                  width: 30,
                  height: 30,
                  fit: BoxFit.cover,
                  package: ModuleConfig.moduleName),
            ),
            Padding(
                padding: EdgeInsets.only(left: 10),
                child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    bean.title,
                    style: TextStyle(
                        color: ThemeUtils.getThemeColor(
                            context: context,
                            brightnessColor: Colors.grey[800],
                            darkColor: Colors.white),
                        fontSize: 14),
                  ),
                )),
            Spacer(),
            Padding(
                padding: EdgeInsets.only(right: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      NumUtil.getNumByValueStr(bean.num,fractionDigits: 8).toStringAsFixed(6),
                      style: TextStyle(
                          color: ThemeUtils.getThemeColor(
                              context: context,
                              brightnessColor: Colors.grey[800],
                              darkColor: Colors.white),
                          fontSize: 12),
                    ),
                    Text(
                      "${NumUtil.getNumByValueStr(bean.cnyMoney,fractionDigits: 8).toStringAsFixed(2)} CNY",
                      style: TextStyle(
                          color: ThemeUtils.getThemeColor(
                              context: context,
                              brightnessColor: Colors.grey[800],
                              darkColor: Colors.white),
                          fontSize: 10),
                    )
                  ],
                )),
          ],
        ),
      ),
      onTap: (){
        WXNavigator.pop();
        WXNavigator.pushNamed(
            context: context, routeName: "/coin_detail", arguments: bean);
      },
    );
  }
}
